import React, {Component} from 'react'
import {Col, Row, Upload} from 'antd'
import '../../static/scss/common/uploadFileComponent.scss'
import Iconfont from '../../utils/iconfont'
import {FileTextOutlined, CloseCircleFilled} from '@ant-design/icons'
import commonConfig from '../../static/js/commonConfig'

const {Dragger} = Upload;

class UploadFileComponent extends Component {
    state = {
        fileList: [],
        ids: [],
        fileIds: [],
    }

    /*删除文件*/
    deleteFile = file => {
        const {fileIds} = this.state
        if (file.id) {
            const {noServiceDel} = this.props;
            if (noServiceDel) {
                commonConfig.deleteModelWindow(() => {
                    fileIds.push(file.id)

                    this.setFile(file);
                })
            } else {
                commonConfig.deleteModelWindow(() => {
                    commonConfig.deleteFileService(file, msg => {
                        if (msg) {
                            this.setFile(file)
                        }
                    })
                })
            }
        } else {
            this.setFile(file);
        }
    }

    setFile = (file) => {
        const {fileList, ids} = this.state;
        let newFile = fileList.filter(f => f !== file);
        let idsArr = [...ids];
        idsArr.push(file.id);
        this.setState({fileList: newFile, ids: idsArr});
    }

    render() {
        const {fileList} = this.state;
        const uploadProps = {
            name: 'file',
            multiple: true,
            action: false,
            fileList,
            showUploadList: false,
            beforeUpload: (file, fileLists) => {
                if (file === fileLists[fileLists.length - 1]) {
                    let newArr = [...fileLists, ...this.state.fileList];
                    this.setState({fileList: newArr});
                }
                return false;
            }
        }
        return (
            <>
                <Row className="upload_file_module">
                    <Col span={24} className="file_list">
                        <ul>
                            {fileList.map((item, i) =>
                                <li className="clearFix" key={i}>
                                    <p className="float-left">
                                        <FileTextOutlined/>{item.name || item.fileName}
                                    </p>
                                    <span className="float-right close_icon" onClick={this.deleteFile.bind(this, item)}>
                                        <CloseCircleFilled/>
                                    </span>
                                </li>
                            )}
                        </ul>
                    </Col>
                    <Col span={24}>
                        <Dragger {...uploadProps}>
                            <div className="clearFix">
                                <p className="ant-upload-text float-left">鼠标双击或直接把文件拖到此区</p>
                                <p className="ant-upload-drag-icon float-right">
                                    <Iconfont type="icon-shangchuan"/>
                                </p>
                            </div>
                        </Dragger>
                    </Col>
                </Row>
            </>
        )
    }
}

export default UploadFileComponent;